<template>
  <div style="width:100%;height:100%" id="bar-chart"></div>
</template>
<script>
import { mapState } from "vuex"

const option = {
  tooltip: {
    trigger: "axis"
  },
  legend: {
    data: ["本月累计用电量", "上月累计用电量"],
    right: 5,
    top: 3,
    textStyle: {
      color: "#fff"
    }
  },
  grid: {
    bottom: "15%",
    left: "16%",
    right: "5%",
    top: "5%"
  },
  xAxis: [
    {
      type: "category",
      data: [...Array(31)].map((t, i) => ++i + "日"),
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff"
        }
      },
      //  隐藏坐标轴
      axisLine: {
        show: false
      },
      // 去除坐标轴上的刻度线
      axisTick: {
        show: false
      },
      // 网格是否显示
      splitLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      name: "kWh",
      nameTextStyle: {
        color: "#fff",
        padding: [0, 20, 0, 0]
      },
      type: "value",
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff"
        }
      },
      //  隐藏坐标轴
      axisLine: {
        show: false
      },
      // 去除坐标轴上的刻度线
      axisTick: {
        show: false
      },
      // 网格是否显示
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: "本月累计用电量",
      type: "bar",
      data: [],
      itemStyle: {
        color: "#08ED74"
      }
    },
    {
      name: "上月累计用电量",
      type: "bar",
      data: [],
      itemStyle: {
        color: "#53FDFC"
      }
    }
  ]
}
export default {
  computed: {
    ...mapState({
      currMonthUseArray: state => state.cityInfo.currMonthUseArray,
      lastMonthUseArray: state => state.cityInfo.lastMonthUseArray
    })
  },
  mounted() {
    this._print()
  },
  watch: {
    currMonthUseArray: {
      handler(val) {
        this._print()
      }
    }
  },
  data() {
    return {
      chart_bar: null
    }
  },
  methods: {
    _print() {
      this.$nextTick(_ => {
        if (!!this.chart_bar) this.chart_bar.clear()
        this.chart_bar = this.echarts.init(document.getElementById("bar-chart"))
        let options = {
          ...option
        }
        options.series[0].data = this.currMonthUseArray
        option.series[1].data = this.lastMonthUseArray
        this.chart_bar.setOption(options)
      })
    }
  }
}
</script>
